<template>
  <el-select
    v-model="selected"
    clearable
    :multiple="multiple"
    :multiple-limit="2"
    filterable
    :placeholder="placeholderModel"
    :no-data-text="NoDataText"
    @change="selectChange"
  >
    <el-option
      v-for="item in serviceContents"
      :key="item.id"
      :label="item.name"
      :value="item.name"
    >
    </el-option>
  </el-select>
</template>

<script>
export default {
  name: "SelectService",
  props: {
    value: String,
    merchantId: [String, Number],
    multiple: Boolean,
    placeholder: String,
    NoDataText: String,
  },

  data() {
    return {
      selected: null,
      serviceContents: [],
      placeholderModel:
        this.placeholder ||
        this.$language.local("请选择") + this.$language.local("ServiceType"),
    };
  },
  created() {
    this.selected = this.value;
    if (this.merchantId) {
      this.getInvoiceType();
    }
  },
  watch: {
    value(newValue) {
      this.selected = newValue;
    },
    merchantId(newValue) {
      this.merchantId = newValue;
      this.getInvoiceType();
    },
  },
  methods: {
    async getInvoiceType() {
      let data = {
        mid: this.merchantId,
      };
      let response = await this.$http.get(
        "/api/ServiceProject/GetServiceProject",
        data
      );
      console.log(response.data.Data);
      this.serviceContents = response.data.Data;
    },
    selectChange(e) {
      console.log(e);
      // let item = this.serviceContents.find(v=>v.);
      this.$emit("input", e);
    },
  },
};
</script>
<style lang="less" scoped>
.el-select {
  width: 100%;
}
</style>
